<template>
   <div :class="[sendReceive === 1 ? 'transfer-me':'transfer-user']">
     <div  v-if="sendReceive === 1" >
       <div>
         <div class="transfer-header-left"></div>
         <div class="transfer-header">
           <div>
             <span v-if="sendReceive === 1" class="message">￥{{money}}</span>
           </div>
           <div>
             <span v-if="sendReceive === 1 && remark" class="message">{{remark}}</span>
           </div>
         </div>
       </div>
       <div class="transfer-footer"></div>
     </div>

    <div v-if="sendReceive === 0">
      <div>
        <div class="transfer-header">
          <div>
            <span v-if="sendReceive === 1" class="message">点击确认收款</span>
          </div>
          <div>
            <span v-if="sendReceive === 1" class="message">￥{{money}}</span>
          </div>
        </div>
        <div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { formatMoney } from '../../../../js/utils.js'
//转账消息
export default {
  props: ['info', 'id'],
  computed: {
    money: function () { // 消息加上超链接
      let msg = this.info.msg
      return '1.00';
    },
    remark: function () { // 消息加上超链接
      let msg = this.info.msg
      return '转账备注';
    },
    sendReceive: function () {
      return this.info.isMe ? 1 : 0
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
    display: inline-flex;
    align-items: center;
    margin: 0 10px 10px 0;
  }
//转账聊天区域的样式
.transfer-me,
.transfer-user{
  display: block;
  background-color: #EE9900;
	word-break: break-word;
	font-size: 14px;
	border-radius: 5px;
  border: 1px #F8F8F2;
  height: 60px;
  width: 140px;
  .transfer-header-left{
     width: 60px;
     //float: left;
     display: inline;
  }
  .transfer-footer{
    top: 40px;;
    height: 20px;
    //background-color: #FFFFFF;
  }
  .transfer-header{
    width: 80px;
    display: inline;
    text-align: left;
    .message {
      display: inline-block;
      white-space: pre-wrap;
      word-wrap: break-word;
      text-align: left;
      font-size: 13px;
      color: #FFFFFF;
    }
  }

}
.transfer-me{
	padding: 8px;
	max-width: 370px;
	color: #FFFDEF;
	font-weight: 400;
	display: inline-block;
}

.transfer-user{
	padding: 8px;
	max-width: 370px;
	color: #FFFFFF;
	font-weight: 400;
	display: inline-block;
}
</style>
